<template>
  <div>
    <van-nav-bar :title="comment.reply_count+'条评论'">
      <van-icon @click=" $emit('close')" slot="left" name="cross" />
    </van-nav-bar>
    <div class="main">
      <item :comment='comment' />
      <list type='c' :commentList='list' :btn='false' />
    </div>
    <div class="footer">
      <van-button plain round type="default" @click='isShowPost=true '>写评论...</van-button>
    </div>
    <van-popup v-model="isShowPost" position="bottom">
      <post v-if='isShowPost' :target='comment.com_id' :article-id='articleId' @post-success='onPostsuccess' />
    </van-popup>
  </div>
</template>
<script>
import List from './list.vue'
import Item from './comment-item.vue'
import Post from './post'
export default {
  name: 'reply',
  components: {
    Item,
    List,
    Post
  },
  props: {
    articleId: {
      type: [String, Object, Number],
      required: true
    },
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      isShowPost: false
    }
  },
  methods: {
    onPostsuccess(data) {
      this.list.unshift(data)
      console.log(data)
      this.comment.reply_count++
      this.isShowPost = false
    }
  }
}
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #fff;
  color: #333;
}
/deep/ .van-nav-bar__title {
  color: #333;
}
.main {
  position: fixed;
  top: 46px;
  left: 0;
  bottom: 46px;
  width: 100%;

  overflow-y: auto;
  // overflow: hidden;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  height: 45px;
  line-height: 40px;
  text-align: center;
  .van-button {
    font-size: 16px;
    width: 160px;
    height: 32px;
  }
}
</style>
